<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>图片列表</title>
    <link rel="shortcut icon" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico" type="image/x-icon"/>
    <link rel="icon" type="image/ico" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/login-register.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/bootstrap-table.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/sweetalert.min.css}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/static/css/daterangepicker-bs3.css}"  />
    <link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/css/viewer.css}" />

    <script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/login-register.js}"></script>
    <script th:src="@{/static/bootstrap-3.3.4-dist/js/bootstrap-table-hellohao1.13.1.js}"></script>
    <script th:src="@{/static/js/clipboard.min.js}"></script>
    <script th:src="@{/static/js/jqBootstrapValidation.min.js}"></script>
    <script th:src="@{/static/js/bootbox.min.js}"></script>
    <script th:src="@{/static/js/sweetalert.min.js}"></script>
    <script th:src="@{/layui/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/mustache.min.js}"></script>
    <script th:src="@{/static/js/moment.js}"></script>
    <script th:src="@{/static/js/daterangepicker.js}"></script>
    <script th:src="@{/js/viewer.min.js}"></script>
    <script th:src="@{/static/js/popover.min.js}"></script>
    <script th:src="@{/js/jquery.qrcode.min.js}"></script>

    <!-- 样式 -->
    <style type="text/css">
        #table_server{
            height: inherit;
        }
        .kv-main {
            padding: 13px;
        }
        pre {
            color: #000;
            line-height: 16px;
            font-size: 13px;
            font-weight: bold;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .slt{
            width: auto;
            height: auto;
            max-width: 260px;
            max-height: 130px;
            border-radius: 5px;
            box-shadow: 1px 2px 4px #999999;
            transition: all 0.6s;
        }
        .slt:hover{
            transform: scale(1.2);
        }
        .table>tbody>tr>td{
            border:0px;
        }
        tbody>tr{
            /*border:1px solid rgb(221, 221, 221);*/
        }
        .table>thead>tr>th{
            border:0px;
        }
        thead>tr{
            /*border:1px solid rgb(221, 221, 221);*/
        }

        /**/
        /* 登录、注册标题 */
        h4{
            font-size: 20px;
            line-height: 50px;
            margin: 0 auto;
        }
        label{
            margin-right: 10px;
            color: #888;
        }

        /* 弹出层遮罩 */
        .layer-mask{
            display: none;      /* 遮罩默认开始是不显示的 */
            z-index: 99999;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;       /* 设置透明度为50% */
        }
        /* 弹出层窗体 */
        .layer-pop{
            display: none;      /* 默认开始是不显示的 */
            z-index: 100000;
            position: fixed;
            top: 0;             /* 设置水平垂直居中 */
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
            height: 300px;
            background: #fff;
        }
        /* 弹出层关闭按钮 */
        .layer-close{
            float: right;
            width: 24px;
            height: 24px;
            border:3px solid #fff;
            text-align: center;       /* 设置内容居中显示 */
            line-height: 24px;        /* 设置内容的高度 */
            border-radius: 50%;
            background: #eee;
            margin: -12px -12px 0 0;
        }
        /* 添加鼠标滑过的样式 */
        .layer-close:hover{
            cursor: pointer;
            background: #ccc;
            color: #fff;
        }


    </style>
</head>
<body>

<div class="container kv-main" style="max-width: 1200px;">
    <div id="isimgs">
        <table class="table  ft-table table-hover" id="table_server">
            <hr/>
                <div class="btn-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            展示类型 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="lookurl();">URL地址展示</a></li>
                            <li><a href="#" onclick="lookslt();">缩略图展示</a></li>
                        </ul>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            批量操作 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="deleall();">删除选中</a></li>
                        </ul>
                    </div>
                    <div class="btn-group" th:if=" ${level} gt '1'">
                        <span style="margin-left: 35px;line-height: 36px;">列表显示：</span>
                    </div>
                    <div class="btn-group" th:if=" ${level} gt '1'">
                        <select id="myselect" class="form-control">
                            <option value="1" checked="checked">所有人</option>
                            <option value="2">仅自己</option>
                            <option value="3">仅他人</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <span style="margin-left: 20px;line-height: 36px;">存储源：</span>
                    </div>
                    <div class="btn-group">
                        <select id="StorageType" class="form-control">
                            <option value="0">所有</option>
                            <option value="5">本地存储</option>
                            <option value="1">网易NOS</option>
                            <option value="2">阿里OSS</option>
                            <option value="3">又拍USS</option>
                            <option value="4">七牛云KODO</option>
                            <option value="6">腾讯COS</option>
                            <option value="7">FTP存储</option>
                            <option value="8">U-File</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <span style="margin-left: 20px;line-height: 36px;">时间：</span>
                    </div>
                    <div class="input-prepend input-group">
                        <span class="add-on input-group-addon" onclick="thisclear()">
                            <i class="glyphicon glyphicon-repeat" ></i>
                        </span>
                        <input  type="text" readonly style="width: 168px" name="reservation" id="reservation" class="form-control" />
                        <div class="btn-group">
                            <a style="margin-left: 20px;" type="button" class="btn btn-info" onclick="screening();">筛选</a>
                        </div>
                    </div>

                </div>
        </table>
    </div>

</div>
<hr/>
<div id="layer-mask" class="layer-mask"></div>
<div id="layer-pop" class="layer-pop" style="border-radius: 5px;">
    <div id="layer-close" class="layer-close">×</div>
    <div id="layer-content" class="layer-content"></div>
</div>
<div id="loginHtml" style="display: none;">
    <div class="login" style="text-align: center;">
        <div id="qrcode" style="padding: 18px;">
            <img id="imgbase64" src="" />
            <div id="erwmxq">
                <h3></h3>
            </div>
        </div>
        <div class="item">
            <label>&nbsp;</label>
        </div>
    </div>
</div>
<img id="linshi" style="display:none;" src="#"/>
</body>
<script type="application/javascript">
    var kooltype = 1;
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });
    var t;
    $(function () {
        var loginid = [[${loginid}]];

        $(document).ready(function() {
            $('#reservation').daterangepicker(null, function(start, end, label) {
            });
        });
        fenye('/admin/selecttable', 1);//1代表查询所有人
    });
    function screening(){
        $("#table_server").bootstrapTable('destroy');
        var myselect = $('#myselect').val();
        var StorageType = $('#StorageType').val();
        var reservation = $('#reservation').val();
        var arr=new Array();
        if(reservation!=''){
            arr=reservation.split(' - ');
            fenye('/admin/selecttable', myselect,StorageType,arr[0],arr[1]);
        }else{
            fenye('/admin/selecttable', myselect,StorageType,null,null);
        }
    }
    function lookurl() {
        $("#table_server").bootstrapTable('destroy');
        kooltype = 1;
        fenye('/admin/selecttable',1);
    }
    function lookslt() {
        $("#table_server").bootstrapTable('destroy');
        kooltype = 2;
        fenye('/admin/selecttable',1);
    }
    function deleall() {
        swal({
                title: "确认删除选中图片？",
                text: "删除后将无法恢复，请谨慎操作。",
                type: "warning",
                showCancelButton: true,//true显示两个按钮
                confirmButtonColor: "#A5DC86",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            },
            function (isConfirm) {
                if (isConfirm) {
                    var rows = $("#table_server").bootstrapTable('getSelections');
                    if (rows.length == 0) {
                        swal("请先勾选图片再删除", "目前未选中任何图片", "error");
                        return;
                    } else {
                        var ids = new Array();
                        var sources = new Array();
                        var imgnames = new Array();
                        $(rows).each(function () {// 通过获得别选中的来进行遍历
                            ids.push(this.id);
                            sources.push(this.source);
                            imgnames.push(this.imgname);
                        });
                        deleallimg(ids,sources,imgnames);
                    }
                }
            });
    }
    function deleallimg(ids,sources,imgnames) {
        var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});
        $.ajax({
            type: "POST",
            url: "/admin/deleallimg",
            data: {ids: ids,sources:sources,imgnames:imgnames},
            dataType: "json",
            success: function (data) {
                layer.close(loading);
                if (data.val > 0) {
                    layer.msg('已成功删除所选图片', {icon: 1});
                }
                $("#table_server").bootstrapTable('refresh', t);
                $("#imgcount").text(data.count);
                $("#usercount").text(data.usercount);
                $("#imgreviewcount").text(data.imgreviewcount);
            }
        });
    }
    function exit() {
        $.ajax({
            type: "POST",
            url: "/user/exit.do",
            dataType: "json",
            success: function (data) {
                layer.msg('账号已退出', {icon: 1});
                window.location.reload();
            }
        });
    }
    //删除
    function deleimg(id, sourcekey,imgname) {
        swal({
                title: "确认是否删除该图片?",
                text: "删除后将无法恢复，请谨慎操作。",
                type: "warning",
                showCancelButton: true,//true显示两个按钮
                confirmButtonColor: "#A5DC86",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            },
            function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/deleimg",
                        data: {id: id, sourcekey: sourcekey,imgname:imgname},
                        dataType: "json",
                        success: function (data) {
                            if (data.val > 0) {
                                $("#table_server").bootstrapTable('refresh', t);
                                layer.msg('删除成功', {icon: 1});
                                $("#imgcount").text(data.count);
                                $("#usercount").text(data.usercount);
                            } else {
                                layer.msg('删除失败', {icon: 2});
                                $("#table_server").bootstrapTable('refresh', t);
                            }
                        }
                    });
                } else {return;}
            });
    }

    function copy(data) {
        var copy = new ClipboardJS('.btn', {
            text: function (trigger) {
                return  data;
            }
        });
        copy.on('success', function (e) {
            layer.msg('复制成功');
            copy.off("success");
        });
        copy.on('error', function (e) {
            layer.msg('复制失败');
            copy.off("error");
        });
    }

    function lookimgs(id,urls) {
        //单张图片预览
        var viewer = new Viewer(document.getElementById('imgs'+id),{
            // inline: true,
            // url: 'data-original',
            // navbar: false,
            // zoomRatio: 0.4,
            // button: true,
            // title: false,
            // keyboard: false,
            toolbar: {
                zoomIn: 1,
                    zoomOut: 1,
                    oneToOne: 1,
                    reset: 1,
                    prev: 0,
                    play: 0,
                    next: 0,
                    rotateLeft: 1,
                    rotateRight: 1,
                    flipHorizontal: 1,
                    flipVertical: 1,
            },
            viewed: function () {
                viewer.view(0);
            }
        });
        document.getElementById('imgs'+id).click();
    }

    function fenye(url, selecttype,StorageType,starttime,stoptime) {
        t = $("#table_server").bootstrapTable({
            url: url,
            method: 'get',
            cache: false,//关闭本地磁盘缓存，
            dataType: "json",
            striped: true,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            showRefresh: true,
            paginationLoop: true,//设置为 true 启用分页条无限循环的功能。
            showToggle: "true",//是否显示 切换试图（table/card）按钮
            showColumns: "true",//是否显示 内容列下拉框
            pageNumber: 1,//如果设置了分页，首页页码
            // showPaginationSwitch:true,//是否显示 数据条数选择框
            pageSize: 20,//如果设置了分页，页面数据条数
            pageList: [20, 40, 80, 160],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            // singleSelect: false,//设置True 将禁止多选
            search: false, //显示搜索框
            data_local: "zh-CN",//表格汉化
            sidePagination: "server", //服务端处理分页
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
                return {//这里的params是table提供的
                    pageNum: (params.offset / params.limit) + 1,//从数据库第几条记录开始
                    pageSize: params.limit//找多少条
                    , selecttype: selecttype
                    ,storageType:StorageType
                    ,starttime:starttime
                    ,stoptime:stoptime
                };
            },
            idField: "链接",//指定主键列
            columns: [{
                checkbox: true
            },
                {
                    title: '链接',
                    formatter: function (value, rows, index) {
                        var view = {
                            imgurl: rows.imgurl
                        };
                        if(kooltype==1){
                            var output = Mustache.render('<a style="cursor:pointer;" onclick="lookimgs('+rows.id+',\'{{&imgurl}}\')">{{imgurl}}<img class="slt" style="display: none;" id="imgs'+rows.id+'" src="{{imgurl}}" alt="" /></a>', view);
                        }else{
                            var output = Mustache.render('<a style="cursor:pointer;"  onclick="lookimgs('+rows.id+',\'{{&imgurl}}\')"><img class="slt" id="imgs'+rows.id+'" src="{{imgurl}}" alt="" /></a>', view);
                        }
                        return output;
                    },
                    align: 'center'
                },
                {
                    title: '日期',
                    field: 'updatetime',
                    align: 'center'
                },
                {
                    title: '大小',
                    formatter: function (value, rows, index) {
                        return getSize(rows.sizes*1024);
                    },
                    align: 'center'
                },
                {
                    title: 'IP地址',
                    formatter: function (value, rows, index) {
                        return rows.abnormal;
                    },
                    align: 'center'
                },
                {
                    title: '用户',
                    formatter: function (value, rows, index) {
                        var names = "";
                        if (rows.username == null) {
                            names = "游客";
                        } else {
                            names = rows.username;
                        }
                        return names;
                    },
                    align: 'center'
                },
                {
                    title: '性质',
                    formatter: function (value, rows, index) {
                        var type = "";
                        if (rows.imgtype == 1) {
                            type = "临时";
                        } else {
                            type = "永久";
                        }
                        return type;
                    },
                    align: 'center'
                },
                {
                    title: '操作',
                    formatter: function (value, rows, index) {
                        var view = {
                            imgurl: rows.imgurl,
                            path:rows.imgname,
                            size:rows.sizes,

                            id:rows.id,
                            source:rows.source
                        };
                        var htm = '<a onclick="copy(\'' + rows.imgurl +
                            '\')" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-list-alt" title="复制"></span></a>'+ "&nbsp;&nbsp;";//复制
                        htm += Mustache.render("<a onclick='erwm(\"{{&imgurl}}\",\"{{path}}\",\"{{size}}\")' class='btn btn-success btn-xs'><span title='二维码' class='glyphicon glyphicon-qrcode'></span></a>"+ "&nbsp;&nbsp;", view) ;//二维码
                        //htm += "<a onclick='deleimg(" + rows.id + "," + rows.source + ")' class='btn btn-danger btn-xs'><span title='删除' class='glyphicon glyphicon-trash'></span></a>";//删除
                        htm += Mustache.render("<a onclick='deleimg(\"{{&id}}\",\"{{source}}\",\"{{path}}\")' class='btn btn-danger btn-xs'><span title='删除' class='glyphicon glyphicon-trash'></span></a>",view);
                        return htm;
                    },
                    align: 'center'
                }
            ]
        });
        t.on('load-success.bs.table', function (data) {
            $(".pull-right").css("display", "block");
        });
    }
    function thisclear() {
        $('#reservation').val('');
    }
    function erwm(url,path,size) {
        var loginHtml = $("#loginHtml").html();
        showLayer(loginHtml, 500, 300, closeCallback);
        var imgbase64 = jrQrcode.getQrBase64(url, '#isimgs');
        $('#imgbase64').attr("src", imgbase64);
    }
        function closeCallback(){
            $(".error-msg").html("");
        }
        function hideLayer(){
            $("#layer-mask").hide();
            $("#layer-pop").hide();
        }
        function showLayer(html, width, height, closeCallback){
            $("#layer-mask").show();
            $("#layer-pop").show();
            $("#layer-pop").css({
                width: width,
                height: height
            });
            $("#layer-content").html(html);
            $("#layer-close").click(function(){
                hideLayer();
                closeCallback();
            })
        }
    function getSize(bytes) {
        if (bytes === 0) return '0 B';
        var k = 1024;
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        i = Math.floor(Math.log(bytes) / Math.log(k));
        return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
    }

</script>
</html>